<template>
    <br>
    <br>
    <h1>hello</h1>
    <div class="mb-4">
        <el-button type="primary" @click="toggleAddForm">新增</el-button>
    </div>
    <div>
        <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="createdAt" label="日期" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="address" label="地址" width="180"/>
        <el-table-column label="Oprations" width="200">
            <template #default="scope">
                <el-button 
                size="large" 
                @click="handleEdit(scope.$index,scope.row)">
                    修改
                </el-button>
                <el-button
                    size="large"
                    type="danger"
                    @click="handleDelete(scope.$index,scope.row)">
                删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    </div>
    <div v-if="showAddForm">
            <el-input v-model="newRestaurant.name" placeholder="餐厅名称"></el-input>
            <el-input v-model="newRestaurant.address" placeholder="餐厅地址"></el-input>
            <el-input v-model="newRestaurant.createdAt" placeholder="创建日期"></el-input>
            <el-button type="primary" @click="add">添加餐厅</el-button>
    </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
const tableData =ref([
    {
    "restaurantId": 1,
    "name": '第一家餐馆',
    "address": "安师大东门",
    "rating": 3,
    "createdAt": "2024-09-10"
  },
  {
    "restaurantId": 2,
    "name": '摇滚炒鸡店',
    "address": "安师大南门",
    "rating": 4,
    "createdAt": "2024-09-10"
  },
  {
    "restaurantId": 3,
    "name": '瓦香鸡店',
    "address": "安师北门",
    "rating": 5,
    "createdAt": "2024-09-10"
  },
])
const showAddForm = ref(false); // 控制输入框显示的变量

function toggleAddForm() {
    showAddForm.value = !showAddForm.value; // 切换输入框的显示状态
}
const newRestaurant = ref({
    name: '',
    address: '',
    createdAt: ''
})
function add(){
    // tableData.value.push(
    //     {
    //         "restaurantId": 4,
    //         "name": '奶茶',
    //         "address": "安师西门",
    //         "rating": 6,
    //         "createdAt": "2024-09-14",
    //     },
    // )
    const newId = tableData.value.length + 1;
    const newRestaurantData = {
        restaurantId: newId,
        ...newRestaurant.value,// 展开 newRestaurant.value 的属性
        rating:0// 假设新添加的餐厅默认评分为0，同时也可以在输入框中添加评分并在这里获取
    };
    tableData.value.push(newRestaurantData)// 将新对象添加到 tableData 中
    newRestaurant.value = { name: '', address: '', createdAt: '' }; // 清空输入框
    showAddForm.value = false; // 添加后隐藏输入框
}
function handleEdit(index: number, row: any){
    row.name='aaa'
    row.createdAt='2022'
}
function handleDelete(index: number, row: any){
    tableData.value.splice(index,1)
}
</script>
<style>

</style>
